<template>
  <div class="container">
    <div class="header-page">
      <div class="inputcontainer">
        <Search></Search>
      </div>
      <div class="Location">
        <div class="CurrentAddr">
          <el-radio-group v-model="selectedButton" @change="handleButtonClick">
            <template v-for="location in weatherStore.allLocations" :key="location.id">
              <!-- 如果不是默认位置则添加上下拉菜单 -->
              <template v-if="!location.isDefault">
                <el-radio-button :label="location.id" class="first-button">
                  <span style="margin-right: 5px">{{ location.name || '' }}</span>
                  <i
                    :class="`qi-${location.weather?.now.icon || ''}-fill`"
                    style="margin-right: 5px; font-size: 16px"
                  ></i>
                  <span class="temperature">{{ location.weather?.now.temp || '' }}°C</span>
                  <!-- 当不是默认位置时，显示下拉菜单 -->
                  <el-dropdown class="dropdown-menu" @command="dropdownComm">
                    <span class="dropdown-trigger">
                      <el-icon
                        class="el-icon-more"
                        style="cursor: pointer; transform: rotate(90deg)"
                        ><More
                      /></el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item command="delete">删除城市</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </el-radio-button>
              </template>
              <!-- 如果是默认位置则不显示下拉菜单 -->
              <template v-else>
                <el-radio-button :label="location.id">
                  <el-icon>
                    <House />
                  </el-icon>
                  <div class="container">
                    <span style="margin-right: 10px">{{ location.name || '' }}</span>
                    <i
                      :class="`qi-${location.weather?.now.icon || ''}-fill`"
                      style="margin-right: 10px"
                    ></i>
                    <span class="temperature" style="margin-right: 10px"
                      >{{ location.weather?.now.temp || '' }}°C</span
                    >
                  </div>
                </el-radio-button>
              </template>
            </template>
          </el-radio-group>
        </div>
      </div>
    </div>
    <!-- 修改网页主题颜色 -->
    <div class="theme-switch">
      <el-tooltip content="切换暗黑/明亮模式" placement="bottom">
        <el-switch
          v-model="isDark"
          @change="changeTheme"
          inline-prompt
          :active-icon="Moon"
          :inactive-icon="Sunny"
        />
      </el-tooltip>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watchEffect } from 'vue'
import { useWeatherStore } from '@/stores/weather'

const weatherStore = useWeatherStore()
// 引入图标组件
import { Moon, Sunny } from '@element-plus/icons-vue'
import Search from '@/components/headerPage/Search.vue'
// 切换btn状态
const selectedButton = ref<string | null>(null)
watchEffect(() => {
  selectedButton.value = weatherStore.currentLocation?.id
})
// 点击顶部按钮切换当前位置
function handleButtonClick(locationName: string) {
  // console.log('handleButtonClick', locationName)
  const location = weatherStore.getLocationById(locationName)
  // console.log('location', location)
  if (location) {
    weatherStore.setCurrentLocation(location.id)
  }
}

//删除城市逻辑
function dropdownComm(e: string) {
  console.log('dropdownComm', e)
}

// 初始化暗黑模式状态，从本地存储中获取或默认为false
const isDark = ref(localStorage.getItem('theme') === 'dark')

// 切换主题函数
function changeTheme() {
  // 添加淡入淡出效果以减少闪烁
  const app = document.getElementById('app')
  if (app) {
    app.style.opacity = '0.95'
  }

  setTimeout(() => {
    if (isDark.value) {
      document.documentElement.classList.add('dark')
      localStorage.setItem('theme', 'dark')
    } else {
      document.documentElement.classList.remove('dark')
      localStorage.setItem('theme', 'light')
    }

    // 恢复不透明度
    if (app) {
      app.style.opacity = '1'
    }
  }, 10)
}

// 组件挂载时初始化主题
onMounted(() => {
  // 检查本地存储中的主题设置
  const savedTheme = localStorage.getItem('theme')

  // 如果有保存的主题设置，应用它
  if (savedTheme === 'dark') {
    isDark.value = true
    document.documentElement.classList.add('dark')
  } else if (savedTheme === 'light') {
    isDark.value = false
    document.documentElement.classList.remove('dark')
  } else {
    // 如果没有保存的主题设置，检查系统偏好
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    isDark.value = prefersDark
    if (prefersDark) {
      document.documentElement.classList.add('dark')
      localStorage.setItem('theme', 'dark')
    } else {
      localStorage.setItem('theme', 'light')
    }
  }
})
</script>
<style scoped lang="scss">
@use '@/assets/customVar' as *;

.first-button {
  position: relative;
}

.location-item-with-dropdown {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.dropdown-menu {
  margin-left: 8px;
  position: absolute;
  right: 10px;
}

.dropdown-trigger {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .theme-switch {
    margin-left: 15px;
  }

  .header-page {
    // width: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .inputcontainer {
      position: relative;
    }

    .Location {
      margin-left: 10px;

      .CurrentAddr {
        display: flex;
        flex-direction: row;
        gap: 10px;

        .custom-btn {
          height: $height;
          width: $width;
          background: rgba(255, 255, 255, 0.45);
          backdrop-filter: blur(10px);
        }
      }
    }
  }
}

:deep(.el-input__wrapper) {
  background-color: $bg-color;
  border: 1px solid #dcdfe6;
  border-radius: $border-radius;
  height: $height;
  width: $width;
}

:deep(.el-input__wrapper.is-focus) {
  // border-color: transparent;
  box-shadow: $bg-color;
}

.active-btn {
  background-color: var(--el-color-primary) !important;
  color: white;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .container {
    .header-page {
      .Location {
        .CurrentAddr {
          gap: 8px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .container {
    // flex-direction: column;
    gap: 1rem;
    align-items: stretch;

    .theme-switch {
      margin-left: 0;
      align-self: center;
    }

    .header-page {
      flex-direction: column;
      gap: 1rem;

      .inputcontainer {
        width: 100%;
      }

      .Location {
        display: none;
        margin-left: 0;
        width: 100%;

        .CurrentAddr {
          flex-wrap: wrap;
          gap: 8px;
          justify-content: center;
        }
      }
    }
  }

  :deep(.el-input__wrapper) {
    width: 100%;
  }
}
</style>
<style lang="scss">
@use '@/assets/customVar.scss' as *;

.el-radio-button.is-active
  .el-radio-button__original-radio:not(:disabled)
  + .el-radio-button__inner {
  background-color: $bg-active-color;
  border-color: transparent;
  box-shadow: none;
  color: black;
}

.el-radio-button__inner {
  height: $height;
  width: $width;
  background: $bg-default-color;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-right: 10px;
  border-radius: $border-radius !important;

  &:hover {
    background-color: $bg-hover-color;
    color: black;
  }
}

html.dark {
  // 选中时样式
  .el-radio-button.is-active
    .el-radio-button__original-radio:not(:disabled)
    + .el-radio-button__inner {
    background-color: $bg-dark-active-color;
    border-color: transparent;
    box-shadow: none;
    color: white;
    //  字体加粗
    font-weight: bold;
  }

  .el-radio-button__inner {
    height: $height;
    width: $width;
    background: $bg-dark-default-color;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    margin-right: 10px;
    border-radius: $border-radius !important;

    &:hover {
      // background-color: rgba($color: #333, $alpha: 0.6);
      background-color: $bg-dark-hover-color;
      color: white;
    }
  }
}
</style>
